<template>
  <aside class="graph-config-box" :class="{ isTop: isTop }">
    <h4>图表配置</h4>
    <ul class="graph-type-list">
      <li
        v-for="(item, index) in graphTypeList"
        :key="index"
        v-if="!item.disabled"
      >
        <div
          class="box"
          :class="{ active: config['graphType'] === item.type }"
          @click="handleCheckGraphType(item)"
        >
          <img :src="item.img" alt="" />
        </div>
      </li>
    </ul>
    <h4>主题</h4>
    <div class="theme-box">
      <!-- <div class="color-box">
        <el-color-picker v-for="(item, index) in config['colors']" :key="index" v-model="item.color" size="mini" class="color-picker"></el-color-picker>
      </div> -->
      <div class="font-box">
        <span class="tit">文字大小</span>
        <el-input-number
          v-model="config['fontSize']"
          size="small"
          controls-position="right"
          @change="handleInpNumber"
          :min="1"
          class="elinput"
        ></el-input-number>
        <!-- <el-input type="number" class="elinput">15</el-input> -->
      </div>
      <ul class="other-list">
        <li>
          <el-checkbox v-model="config['showLabel']" class="elcheckbox"
            >显示数据标签</el-checkbox
          >
        </li>
        <li>
          <el-checkbox v-model="config['showLegend']" class="elcheckbox"
            >显示图例</el-checkbox
          >
        </li>
        <!-- <li>
          <el-checkbox v-model="config['axisLine'].checked" class="elcheckbox"
            >轴线</el-checkbox
          >
          <el-select
            v-model="config['axisLine'].type"
            size="mini"
            placeholder="请选择"
            class="elselect"
          >
            <el-option
              v-for="item in lineTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-color-picker
            v-model="config['axisLine'].color"
            size="mini"
            class="color-picker"
          ></el-color-picker>
        </li> -->
        <li>
          <el-checkbox v-model="config['xGridLine'].checked" class="elcheckbox"
            >X轴网格线</el-checkbox
          >
          <el-select
            v-model="config['xGridLine'].type"
            size="mini"
            placeholder="请选择"
            class="elselect"
          >
            <el-option
              v-for="item in lineTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-color-picker
            v-model="config['xGridLine'].color"
            size="mini"
            class="color-picker"
          ></el-color-picker>
        </li>

        <li>
          <el-checkbox v-model="config['yGridLine'].checked" class="elcheckbox"
            >Y轴网格线</el-checkbox
          >
          <el-select
            v-model="config['yGridLine'].type"
            size="mini"
            placeholder="请选择"
            class="elselect"
          >
            <el-option
              v-for="item in lineTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-color-picker
            v-model="config['yGridLine'].color"
            size="mini"
            class="color-picker"
          ></el-color-picker>
        </li>
        <li>
          <el-checkbox v-model="config['showBgColor'].checked"
            >背景</el-checkbox
          >
          <el-color-picker
            v-model="config['showBgColor'].color"
            size="mini"
            class="color-picker"
          ></el-color-picker>
        </li>
      </ul>
    </div>
    <div class="tools-box">
      <button @click="saveConfig" class="save-btn">保存配置</button>
      <button @click="getConfig" class="reset-btn">重置</button>
    </div>
  </aside>
</template>

<script>
import { mapState } from "vuex";
const img1 = require("@/assets/img/PS/graph/1.png");
const img2 = require("@/assets/img/PS/graph/2.png");
const img3 = require("@/assets/img/PS/graph/3.png");
const img4 = require("@/assets/img/PS/graph/4.png");
const img5 = require("@/assets/img/PS/graph/5.png");
const img6 = require("@/assets/img/PS/graph/6.png");
const img7 = require("@/assets/img/PS/graph/7.png");
const img8 = require("@/assets/img/PS/graph/8.png");
export default {
  data() {
    return {
      isTop: false,
      graphTypeList: [],
      lineTypes: [],
      config: {
        graphType: "bar",
        // 默认配色
        colors: 
         [
          { color: "#37a2da" },
          { color: "#67e0e3" },
          { color: "#9fe6b8" },
          { color: "#ffdb5c" },
          { color: "#ff9f7f" },
          { color: "#e062ae" },
          { color: "#e690d1" },
          { color: "#e7bcf3" },
          { color: "#9d96f5" },
          { color: "#8378EA" },
        ],
        fontSize: 12,
        showLabel: true, // 数据标签
        showLegend: false, // 图例
        axisLine: {
          // 轴线
          type: "solid",
          color: "#555",
          checked: true,
        },
        xGridLine: {
          // 横向网格线
          type: "dashed",
          color: "#E4E4E4",
          checked: false,
        },
        yGridLine: {
          // 纵向网格线
          type: "dashed",
          color: "#E4E4E4",
          checked: true,
        },
        showBgColor: {
          // 背景
          color: "#E4E4E4",
          checked: false
        }
      },
      tempId: ""
    };
  },
  computed: {
    ...mapState(["curChartTempl"])
  },
  watch: {
    $route: {
      handler(nv){
        this.tempId = nv.query.tempId;
        // this.getConfig(); //不可删除此逻辑！此逻辑用于无头浏览器透出报告功能。
      },
      immediate: true,
      deep: true
    },
    // 每次切换左侧分面数据 都会调取info 接口，，，此处可能会影响到无头浏览器 小心这块内容
    curChartTempl: {
      handler(nv){
        this.getConfig(); //更换左侧分面数据时 用于查询图表配置。
      },
      deep: true
    }
  },
  mounted(){
    //不可删除此逻辑！此逻辑用于无头浏览器透出报告功能。
    // this.getConfig();
  },
  methods: {
    init() {
      this.graphTypeList = [
        { type: "bar", img: img1, disabled: true },
        // { type: "bar2", img: img2, disabled: true },
        { type: "line", img: img3, disabled: true },
        { type: "pie1", img: img4, disabled: true },
        { type: "map", img: img7, disabled: true },
        { type: "graph", img: img6, disabled: true },
        { type: "pie2", img: img5, disabled: true },
        { type: "radar", img: img8, disabled: true },
      ];
      this.lineTypes = [
        { label: "——", value: "solid" },
        { label: "-------", value: "dashed" },
        { label: "··········", value: "dotted" },
      ];
    },
    handleInpNumber() {},
    // 查询图表配置
    getConfig() {
      this.$post(this.$Url.analysis.aggsInfo, {
        tid: Number(this.tempId) || this.curChartTempl.id
      })
        .then((res) => {
          let data = res.data;
          let tdata = data && data.tdata;
          if (data && tdata.config) {
            let config = tdata.config;
            config["tid"] = Number(this.tempId) || this.curChartTempl.id;
            if (tdata.datatype === 0) {
              // 折线图、柱形图、堆积图
              this.graphTypeList.forEach((v) => {
                if (config["tid"] == "101000" ) {
                  if (v.type === "line") {
                    v.disabled = false;
                  } else {
                    v.disabled = true;
                  }
                } else {
                  if (v.type === "bar" || v.type === "line") {
                    v.disabled = false;
                  } else {
                    v.disabled = true;
                  }
                }
              });
              // if (config.graphType !== "line" && config.graphType !== "bar") {
              //   config.graphType = "line";
              // }
              config.graphType = "line";
              config.showLegend = true;
              // config.showLabel = true;
            } else if (tdata.datatype === 1 || tdata.datatype === 15 || tdata.datatype === 6) {
              // 柱形图
              this.graphTypeList.forEach((v) => {
                if (v.type === "bar" || v.type === "line") {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
                if (config["tid"] == "201000" || config["tid"] == "202000" || config["tid"] == "301000") { // 地域分析  主要申请人排名
                  if (v.type == "pie1") {
                    v.disabled = false;
                  }
                }
              });
              if (
                config.graphType !== "line" &&
                config.graphType !== "bar" &&
                config.graphType !== "bar2"
              ) {
                config.graphType = "line";
              }
            } else if (tdata.datatype === 2) {
              // 全国地图
              this.graphTypeList.forEach((v) => {
                if (v.type === "map") {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
              config.graphType = "map";
            } else if (tdata.datatype === 3) {
              // 柱形图、饼图
              this.graphTypeList.forEach((v) => {
                if (
                  v.type === "bar" ||
                  v.type === "bar2" ||
                  v.type === "line" ||
                  v.type === "pie1"
                ) {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
            } else if (tdata.datatype === 4) {
              // 关系图
              this.graphTypeList.forEach((v) => {
                if (v.type === "graph") {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
              config.graphType = "graph";
            } else if (
              tdata.datatype === 5 ||
              tdata.datatype === 6 ||
              tdata.datatype === 7 ||
              tdata.datatype === 8
            ) {
              this.graphTypeList.forEach((v) => {
                v.disabled = true;
              });
            } else if (tdata.datatype === 15) {
              this.graphTypeList.forEach((v) => {
                if (v.type === "line") {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
            } else if (tdata.datatype === 18) {
              // 柱形图、饼图
              this.graphTypeList.forEach((v) => {
                if (
                  v.type === "bar" ||
                  v.type === "bar2" ||
                  v.type === "pie1"
                ) {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
              config.graphType = "pie1";
            } else {
              // 其他 暂时默认为折线图 否则会发生异常错误
              this.graphTypeList.forEach((v) => {
                if (
                  v.type === "bar" ||
                  v.type === "bar2" ||
                  v.type === "line"
                ) {
                  v.disabled = false;
                } else {
                  v.disabled = true;
                }
              });
              config.graphType = "line";
            }
            this.$store.commit("setCurChartConfig", config);
            this.config = config;
          } else {
            this.saveConfig();
          }
        })
        .catch((err) => {});
    },
    // 保存图表配置
    saveConfig() {

      let params = {
        tid: this.curChartTempl.id,
        tdata: this.curChartTempl.tdata,
      };
      params.tdata["config"] = this.config;

      //区别趋势分析、排名分析 （趋势：line  排名：bar）
      switch(this.curChartTempl.id){
        case 201000:
        case 202000:
        case 301000:
        case 401000:
        case 501000:
        case 21000000:
        case 22000000:
          params.tdata["config"]['graphType'] = "bar"
          break;
        default:
          params.tdata["config"]['graphType'] = "line"
        break;
      } 
      this.$store.commit("setCurChartConfig", this.config);
      this.$post(this.$Url.analysis.aggsInfoSave, params)
        .then((res) => {
          this.$message({
            type: "success",
            duration: 1000,
            message: "首次图表配置保存成功！",
          });
        })
        .catch((err) => {});
    },
    // 选择图表类型
    handleCheckGraphType(item) {
      if (!item.disabled) {
        this.config.graphType = item.type;
        this.$store.commit("setCurChartConfig", this.config);
      }
    },
  },
  beforeMount() {
    // 判断是否嵌入了iframe
    // window.self === window.top ? (this.isTop = false) : (this.isTop = true);
    this.init();
    // if (this.curChartTempl && Object.keys(this.curChartTempl).length > 0) {
    //   this.getConfig();
    // }
  },
};
</script>

<style lang="scss" scoped>
.graph-config-box {
  position: relative;
  height: calc(100vh - 0.7rem);
  width: calc(240px + 20px);
  background-color: $color4;
  overflow-y: auto;
  &.isTop {
    height: calc(100vh);
  }
  h4 {
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid $color142;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: bold;
    color: $color158;
  }
  .graph-type-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 10px;
    background-color: $color2;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
      min-width: 40px;
      height: 40px;
      margin-bottom: 10px;
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid $color141;
        box-sizing: border-box;
        img {
          display: block;
        }
        &:hover {
          border-color: $color52;
          background-color: $color52;
          cursor: pointer;
          img {
            opacity: 0.8;
          }
        }
        &.active {
          border-color: $color52;
          background-color: $color52;
          cursor: pointer;
        }
        &[disabled] {
          filter: $color72;
          -webkit-filter: grayscale(100%);
        }
      }
    }
  }
  .theme-box {
    padding: 20px;
    background-color: $color2;
    .color-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 20px;
    }
    .font-box {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 20px;
      .tit {
        display: inline-block;
        margin-right: 16px;
        font-size: 12px;
        color: $color6;
      }
      .elinput {
        flex: 1;
        ::v-deep {
          .el-input__inner {
            height: 32px !important;
            border-color: $color4;
            background-color: $color4;
          }
          .el-input-number__decrease {
            border: none;
          }
          .el-input-number__increase {
            border: none;
            .el-icon-arrow-up {
              color: #606266 !important;
            }
          }
        }
      }
    }
    .other-list {
      position: relative;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 18px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .elcheckbox {
          width: 90px;
        }
        ::v-deep {
          .elselect {
            flex: 1;
            height: 16px;
            margin-right: 10px;
            .el-input__inner {
              height: 16px;
              border: none;
              background-color: $color4;
            }
            .el-input__icon {
              line-height: 14px;
            }
          }
        }
        .color-picker {
          height: 20px;
          line-height: 22px;
          margin: 0;
        }
      }
    }
  }
}

.color-picker {
  // height: 15px;
  margin: 0 6px;
  ::v-deep {
    .el-color-picker__trigger {
      width: 15px;
      height: 15px;
      padding: 0;
      border: 1px solid $color1;
    }
    .el-color-picker__color {
      border: 0;
    }
    .el-color-picker__icon {
      &:before {
        display: none;
      }
    }
  }
}
.tools-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid $color142;
  background-color: $color2;
  button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    margin: 0 10px;
    font-size: 12px;
    cursor: pointer;
    &.save-btn {
      border-color: $mainColor;
      color: $color51;
      background-color: $mainColor;
    }
    &.reset-btn {
      border: 1px solid $color141;
      background-color: $color2;
    }
  }
}
</style>
